<template>
  <div class="warn">
    <div class="warn-header"></div>
    <div class="warn-content">
      <div class="warn-content-gj">
        <div class="warn-content-gj-img"></div>
        <div class="warn-content-gj-text">
          <div class="warn-content-gj-text-title"></div>
          <div class="warn-content-gj-text-count"><span class="num">{{ gjCount }}</span>次</div>
        </div>
      </div>
      <div class="warn-content-tab card-tab ">
        <div :class="{
          'warn-content-tab-item card-tab-item': true,
          'warn-content-tab-item-active card-tab-item-active': active === 0
        }" @click="handleClick(0)">
          累计告警
        </div>
        <div :class="{
          'warn-content-tab-item card-tab-item': true,
          'warn-content-tab-item-active card-tab-item-active': active === 1
        }" @click="handleClick(1)">
          告警列表
        </div>
      </div>
      <div v-if="active === 0" class="warn-content-stat">

        <div class="card-title">
          <h1>累计告警数量</h1>
          <span class="card-title-num">
            <span class="card-title-num-num">{{ sum }}</span>
            <span class="card-title-num-unit">次</span>
          </span>
        </div>
        <div class="landing-content-data">
          <div class="landing-content-data-chart" id="landingChart"></div>
          <div class="landing-content-data-list">
            <div class="landing-content-data-list-item" v-for="(item, index) in data" :key="index" @click="handleClick(item)">
              <div class="landing-content-data-list-item-left">
                <span class="landing-content-data-list-item-left-icon" :style="{ background: item.icon }"></span>
                <span class="landing-content-data-list-item-left-title">{{ item.title }}</span>
              </div>
              <div class="landing-content-data-list-item-right">
                <!-- <span class="landing-content-data-list-item-right-count">{{ item.count }}个</span> -->
                <span class="landing-content-data-list-item-right-percent">{{  item.count }}个</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <c-table v-else :items="items" :data="dataList" @click="handleTableRow"></c-table>
    </div>
  </div>
</template>
<script lang="ts" setup>  
import { incrementNumber } from '@/utils/index';
import { onMounted, ref, nextTick } from 'vue'
import * as echarts from 'echarts';
import CTable from '@/components/table.vue'

const active = ref(0)
const handleClick = async (data: number) => {
  active.value = data
  if (data === 0) {
    await nextTick()
    initChart()
  }
} 

const gjCount = ref(0)
const sum = ref(0)
const items = ref([
  
  {
    title: '飞行任务',
    key: 'task'
  },
  {
    title: '告警类型',
    key: 'type'
  },
  {
    title: '告警时间',
    key: 'time',
  },
  
])
// 数据
interface IData {
  // 色值
  icon: string;
  // 标题
  title: string;
  // 数量
  count: number;
  // 百分比
  percent: number;
}
const data = ref<IData[]>([])
const dotColors = [
  '#179AFF',
  '#1CDBFF',
  '#FF4A4A',
  '#FF7734',
  '#FFC97B',
  '#8D70F4',
  '#5A77FF',
  '#33D7C9',
  '#FFD733',
  '#FF8D33',
];

onMounted(() => {
  // TODO: 接口回来
  incrementNumber(102, 800, sum)
  incrementNumber(21, 900, gjCount);

  data.value = [
    { icon: '#FF4A4A', title: '闯入禁飞区', count: 3, percent: 2.9 },
    { icon: '#FF7734', title: '偏离航道', count: 77, percent: 75.4 },
    { icon: '#FFC97B', title: '黑飞', count: 1, percent: 0.9 },
    { icon: '#1CDBFF', title: '非法闯入管控区', count: 21, percent: 20.8 },
  ]
  initChart()
})
// 初始化echarts
function initChart() {
  const chartDom = document.getElementById('landingChart') as HTMLElement;
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: '累计警告',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: '累计警告',
          color: '#fff',
          fontSize: 16,
          lineHeight: 24
        },
        labelLine: {
          show: false
        },
        data: data.value.map((item, index) => ({
          value: item.count,
          name: item.title,
          itemStyle: { color: dotColors[index % dotColors.length] }
        }))
      }
    ]
  };
  myChart.setOption(option);
}


interface IDataList {
  // 飞行任务
  task: string
  // 告警时间
  time: string
  // 告警类型
  type: string
}
const dataList = ref<IDataList[]>([])
  dataList.value = [
    {
      task: '梅溪湖物流速递',
      time: '06-12 09:55:21',
      type: '违规'
    },
    {
      task: '梅溪湖物流速递',
      time: '06-12 09:55:21',
      type: '违规'
    },
    {
      task: '浏阳河政务巡检',
      time: '06-12 09:55:21',
      type: '偏离'
    },
    {
      task: '浏阳河政务巡检',
      time: '06-12 09:55:21',
      type: '偏离'
    },
    {
      task: '未知',
      time: '06-12 09:55:21',
      type: '黑飞'
    }
  ]

  const handleTableRow = (row: IDataList) => {
  console.log(row)
}
</script>

<style lang="scss" scoped>
.warn {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/monitor/warn-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 392px;
    padding: 0px 20px 10px 20px;

    &-gj{
      display: flex;
      height: 100px;
      &-img{
        margin-left: 28px;
        width: 100px;
        height: 82px;
        background: url('@/assets/monitor/warn/gj.svg') 0% 0% / 100% 100% no-repeat;
      }
      &-text{
        padding: 10px 0 0 20px;
        &-title{
          width: 247px;
          height: 36px;
          background: url('@/assets/monitor/warn/sjzb.svg') 0% 0% / 100% 100% no-repeat;
        }
        &-count{
          padding-top: 4px;
          line-height: 36px;
          font-size: 14px;
          color: #FFFFFF;
          text-align: left;
          .num{
            font-family: YouSheBiaoTiHei;
            font-size: 32px;
            padding-right: 6px;
          }
        }
      }
    }

    // &-tab {
    //   height: 30px;
    //   margin-bottom: 10px;

    //   &-item {
    //     display: inline-block;
    //     width: 1;
    //     height: 30px;
    //     background: linear-gradient(90deg, rgba(7, 47, 95, 0.3) 5%, rgba(7, 47, 95, 0.3) 99%);
    //     box-sizing: border-box;
    //     /* 蓝色-渐变 */
    //     border: 1px solid;
    //     border-image: linear-gradient(0deg, #A0D2E9 6%, #A1D3EB 100%) 1;
    //     font-family: Source Han Sans CN;
    //     font-size: 16px;
    //     font-weight: normal;
    //     line-height: 30px;
    //     text-align: center;
    //     letter-spacing: normal;
    //     /* 文字颜色/主标题&一级标题 */
    //     color: #FFFFFF;
    //     cursor: pointer;

    //     &-active {
    //       background: rgba(28, 115, 226, 0.6);
    //     }
    //   }
    // }

    &-stat{
      .card-title {
        margin-bottom: 10px;
      }
      .card-title-num-num{
        font-family: YouSheBiaoTiHei;
        font-size: 30px;
      }
    }
  }
}

.landing{
  &-content{
    &-data {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      &-chart {
        width: 130px;
        height: 130px;
        margin-right: 24px;
        position: relative;
      }

      &-list {
        flex: 1;

        &-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          &-left {
            display: flex;
            flex-direction: row;
            align-items: center;

            &-icon {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              margin-right: 12px;
            }

            &-title {
              font-size: 14px;
              font-weight: normal;
              line-height: 28.8px;
              letter-spacing: normal;
              color: #FFFFFF;
            }
          }

          &-right {

            &-count {
              font-size: 14px;
              font-weight: normal;
              line-height: 29px;
              letter-spacing: normal;
              color: #FFFFFF;
              margin-right: 8px;
            }

            &-percent {
              font-family: YouSheBiaoTiHei;
              font-size: 20px;
              font-weight: bold;
              line-height: 23.04px;
              letter-spacing: normal;
              /* 文字颜色/主标题&一级标题 */
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
</style>
